<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Champions League Statistics Visualization</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <svg width="800" height="600">
        <!-- SVG content will be rendered here -->
    </svg>

    <script>
        // Load data
        const dataUrl = "https://gist.githubusercontent.com/balajimandava/ad5e12d1a51b7392a504a10a19023d4f/raw/9bb242622c9a2b7fa43f40bf1bccdbe9f822132a/CHAMPIONS%2520LEAGUE%2520DATASET.CSV";

        fetch(dataUrl)
            .then(response => response.text())
            .then(data => {
                // Parse CSV data
                const parsedData = d3.csvParse(data);

                // Data preprocessing
                const teamStats = d3.rollup(parsedData, v => ({
                    goals: d3.sum(v, d => +d.Goals),
                    matchesPlayed: v.length,
                    wins: d3.sum(v, d => d.Outcome === "W" ? 1 : 0)
                }), d => d.Team);
                const statsData = Array.from(teamStats, ([team, stats]) => ({ team, ...stats }));

                // Set up SVG
                const svg = d3.select("svg");

                // Define margins and dimensions
                const margin = { top: 20, right: 20, bottom: 30, left: 50 };
                const width = +svg.attr("width") - margin.left - margin.right;
                const height = +svg.attr("height") - margin.top - margin.bottom;

                // Create a group for visualization
                const g = svg.append("g")
                    .attr("transform", `translate(${margin.left},${margin.top})`);

                // Define scales
                const x = d3.scaleBand()
                    .range([0, width])
                    .padding(0.1)
                    .domain(statsData.map(d => d.team));

                const y = d3.scaleLinear()
                    .range([height, 0])
                    .domain([0, d3.max(statsData, d => d.goals)]);

                // Render bars for goals
                g.selectAll(".goals-bar")
                    .data(statsData)
                    .enter().append("rect")
                    .attr("class", "goals-bar")
                    .attr("x", d => x(d.team))
                    .attr("y", d => y(d.goals))
                    .attr("width", x.bandwidth() / 3)
                    .attr("height", d => height - y(d.goals))
                    .attr("fill", "steelblue");

                // Render bars for matches played
                g.selectAll(".matches-bar")
                    .data(statsData)
                    .enter().append("rect")
                    .attr("class", "matches-bar")
                    .attr("x", d => x(d.team) + x.bandwidth() / 3)
                    .attr("y", d => y(d.matchesPlayed))
                    .attr("width", x.bandwidth() / 3)
                    .attr("height", d => height - y(d.matchesPlayed))
                    .attr("fill", "orange");

                // Render bars for wins
                g.selectAll(".wins-bar")
                    .data(statsData)
                    .enter().append("rect")
                    .attr("class", "wins-bar")
                    .attr("x", d => x(d.team) + (2 * x.bandwidth() / 3))
                    .attr("y", d => y(d.wins))
                    .attr("width", x.bandwidth() / 3)
                    .attr("height", d => height - y(d.wins))
                    .attr("fill", "green");

                // Add x-axis
                g.append("g")
                    .attr("class", "x-axis")
                    .attr("transform", `translate(0,${height})`)
                    .call(d3.axisBottom(x))
                    .selectAll("text")
                    .attr("transform", "rotate(-45)")
                    .style("text-anchor", "end");

                // Add y-axis
                g.append("g")
                    .attr("class", "y-axis")
                    .call(d3.axisLeft(y));

                // Add legend
                const legend = svg.append("g")
                    .attr("class", "legend")
                    .attr("transform", `translate(${width - margin.right},${margin.top})`);

                legend.append("rect")
                    .attr("x", 0)
                    .attr("y", 0)
                    .attr("width", 20)
                    .attr("height", 20)
                    .attr("fill", "steelblue");

                legend.append("text")
                    .attr("x", 30)
                    .attr("y", 10)
                    .text("Goals");

                legend.append("rect")
                    .attr("x", 0)
                    .attr("y", 30)
                    .attr("width", 20)
                    .attr("height", 20)
                    .attr("fill", "orange");

                legend.append("text")
                    .attr("x", 30)
                    .attr("y", 40)
                    .text("Matches Played");

                legend.append("rect")
                    .attr("x", 0)
                    .attr("y", 60)
                    .attr("width", 20)
                    .attr("height", 20)
                    .attr("fill", "green");

                legend.append("text")
                    .attr("x", 30)
                    .attr("y", 70)
                    .text("Wins");

                // Add title
                svg.append("text")
                    .attr("x", (width / 2) + margin.left)
                    .attr("y", margin.top)
                    .attr("text-anchor", "middle")
                    .style("font-size", "16px")
                    .text("Champions League Statistics Visualization");

                // Add axis labels
                svg.append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 0)
                    .attr("x", 0 - (height / 2))
                    .attr("dy", "1em")
                    .style("text-anchor", "middle")
                    .text("Statistics");

                svg.append("text")
                    .attr("transform",
                        `translate(${(width + margin.left + margin.right) / 2},${height + margin.top + 20})`)
                    .style("text-anchor", "middle")
                    .text("Team");
            });
    </script>
</body>
</html>
